{% extends 'admin/base.html' %}
{% set active_page = 'dashboard' %}

{% block title %}仪表板{% endblock %}

{% block page_title %}仪表板{% endblock %}

{% block page_subtitle %}最后登录: {{ current_admin.last_login_at.strftime('%Y-%m-%d %H:%M') if current_admin.last_login_at else '首次登录' }}{% endblock %}

{% block content %}
                <!-- 统计卡片 -->
                <div class="row mb-4">
                    <div class="col-md-3 mb-3">
                        <div class="stat-card">
                            <div class="d-flex align-items-center">
                                <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                    <i class="bi bi-people"></i>
                                </div>
                                <div class="ms-3">
                                    <div class="text-muted small">总用户数</div>
                                    <h3 class="mb-0">{{ stats.total_users }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="stat-card">
                            <div class="d-flex align-items-center">
                                <div class="stat-icon" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">
                                    <i class="bi bi-clipboard-check"></i>
                                </div>
                                <div class="ms-3">
                                    <div class="text-muted small">今日测评</div>
                                    <h3 class="mb-0">{{ stats.today_assessments }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="stat-card">
                            <div class="d-flex align-items-center">
                                <div class="stat-icon" style="background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);">
                                    <i class="bi bi-exclamation-triangle"></i>
                                </div>
                                <div class="ms-3">
                                    <div class="text-muted small">风险用户</div>
                                    <h3 class="mb-0">{{ stats.risk_users }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <div class="stat-card">
                            <div class="d-flex align-items-center">
                                <div class="stat-icon" style="background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%);">
                                    <i class="bi bi-star"></i>
                                </div>
                                <div class="ms-3">
                                    <div class="text-muted small">付费会员</div>
                                    <h3 class="mb-0">{{ stats.premium_members }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 快速操作 -->
                <div class="action-card">
                    <h5 class="card-title"><i class="bi bi-lightning me-2"></i>快速操作</h5>
                    <div class="row">
                        <div class="col-md-3 mb-2">
                            <a href="#" class="btn btn-primary w-100">
                                <i class="bi bi-plus-circle me-2"></i>添加新量表
                            </a>
                        </div>
                        <div class="col-md-3 mb-2">
                            <button class="btn btn-success w-100">
                                <i class="bi bi-upload me-2"></i>批量导入
                            </button>
                        </div>
                        <div class="col-md-3 mb-2">
                            <a href="#" class="btn btn-info w-100">
                                <i class="bi bi-download me-2"></i>数据分析
                            </a>
                        </div>
                        <div class="col-md-3 mb-2">
                            <a href="#" class="btn btn-warning w-100">
                                <i class="bi bi-people me-2"></i>用户管理
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 最近测评记录 -->
                <div class="action-card mb-3">
                    <h5 class="card-title"><i class="bi bi-clock-history me-2"></i>最近测评记录</h5>
                </div>
                <div class="data-table">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>用户ID</th>
                                    <th>量表名称</th>
                                    <th>得分</th>
                                    <th>风险等级</th>
                                    <th>测评时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for assessment in recent_assessments %}
                                <tr>
                                    <td>U{{ '%06d'|format(assessment.user_id) }}</td>
                                    <td>{{ assessment.scale.name if assessment.scale else '未知量表' }}</td>
                                    <td><span class="badge bg-primary">{{ assessment.total_score or '-' }}</span></td>
                                    <td>
                                        {% if assessment.risk_level == 'high' %}
                                            <span class="status-badge" style="background: #f8d7da; color: #721c24;">高风险</span>
                                        {% elif assessment.risk_level == 'medium' %}
                                            <span class="status-badge" style="background: #fff3cd; color: #856404;">中度风险</span>
                                        {% elif assessment.risk_level == 'low' %}
                                            <span class="status-badge" style="background: #d4edda; color: #155724;">轻度风险</span>
                                        {% else %}
                                            <span class="status-badge" style="background: #e2e3e5; color: #383d41;">未评估</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ assessment.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-admin me-1">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                        {% if assessment.risk_level == 'high' %}
                                        <button class="btn btn-sm btn-admin-danger">
                                            <i class="bi bi-exclamation-triangle"></i>
                                        </button>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                                {% if not recent_assessments %}
                                <tr>
                                    <td colspan="6" class="text-center text-muted">暂无测评记录</td>
                                </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
{% endblock %}

{% block extra_js %}
<script>
    // 模拟实时数据更新
    function updateStats() {
        console.log('更新统计数据');
        // 这里可以添加AJAX请求来获取最新数据
        apiRequest('/api/admin/dashboard/stats')
            .then(data => {
                if (data.success) {
                    // 更新统计数据
                    console.log('统计数据已更新', data.data);
                }
            })
            .catch(error => {
                if (error.message !== 'Unauthorized') {
                    console.error('更新统计数据失败:', error);
                }
            });
    }

    // 每30秒更新一次数据
    setInterval(updateStats, 30000);

    // 页面加载完成后的初始化
    document.addEventListener('DOMContentLoaded', function() {
        console.log('仪表盘页面初始化完成');
    });
</script>
{% endblock %}